
<script setup>
import { ref, onMounted } from 'vue'
import {mxClient} from './../../graph/mxClient'
import {mxEvent} from './../../graph/util/mxEvent'
import {mxGraph} from './../../graph/view/mxGraph'

onMounted(() => {
  main();
})

function main() {
  // Checks if the browser is supported
  if (!mxClient.isBrowserSupported()) {
    // Displays an error message if the browser is not supported.
    mxUtils.error('Browser is not supported!', 200, false);
  }
  else {
    const container = document.getElementById('graphContainer');
    // Disables the built-in context menu
    mxEvent.disableContextMenu(container);

    // Creates the graph inside the given container
    var graph = new mxGraph(container);

    // Enables rubberband selection
    // new mxRubberband(graph);

    // Gets the default parent for inserting new cells. This
    // is normally the first child of the root (ie. layer 0).
    var parent = graph.getDefaultParent();

    // Adds cells to the model in a single step
    graph.getModel().beginUpdate();
    try {
      var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
      var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
      var e1 = graph.insertEdge(parent, null, '', v1, v2);
    }
    finally {
      // Updates the display
      graph.getModel().endUpdate();
    }
  }
};

</script>

<template>
  <div id="graphContainer" style>test</div>
</template>

<style scoped>
a {
  color: #42b983;
}
#graphContainer {
  overflow: hidden;
  width: 600px;
  height: 400px;
  background: url("./../assets/images/grid.gif");
  cursor: default;
  border: 1px solid red;
}
</style>
